<template #rightExtra>
    <div class="newFileBox">
        <a-modal v-model:open="dialogVisible" title="新建文件夹" @ok="newFolder">
            <div class="wrapper-new">
                <label>文件夹名称：</label>
                <a-input v-model:value="directoryName" placeholder="请输入文件夹名称" style="padding: 6px;" />
            </div>
        </a-modal>
        <a-modal
            v-model:open="dialogVisibleZutu"
            :footer="null"
            width="518px"
            title="新建组图"
            :keyboard="false"
        >
        <div class="media-box zutu-wrapper">
            <div class="zutu-info">
                <h2>组图信息</h2>
                <a-form
                    :model="formZutu" 
                    :labelAlign="'right'"
                    :label-col="{span: 4}" 
                    :wrapper-col="{ span: 20 }"
                    @submit.stop="uploadSureSubmit">
                    <a-form-item label="组图名称" v-bind="validateInfos.name">
                        <a-input v-model:value="formZutu.name" placeholder="请输入组图名称" show-count :maxlength="20" />
                    </a-form-item>
                    <a-form-item label="组图图说" v-bind="validateInfos.description">
                        <a-textarea v-model:value="formZutu.description" :autosize="{ minRows: 4, maxRows: 10 }" placeholder="请输入组图图说" show-count :maxlength="200" />
                    </a-form-item>
                    <a-form-item label="拍摄位置">
                        <!-- <a-input v-model:value="formZutu.location" /> -->
                        <!-- <MapContainer :localInfo="formZutu.location" @select="getLocationInfo" class="mp-wrapper" /> -->
                    </a-form-item>
                    <a-form-item label="拍摄时间">
                        <a-date-picker
                            format="YYYY-MM-DD"
                            valueFormat="YYYY-MM-DD"
                            allowClear placeholder="请选择拍摄时间" 
                            v-model:value="formZutu.shooting_time" 
                            style="width: 100%;"
                        />
                    </a-form-item>
                    <a-form-item label="创作人">
                        <a-input v-model:value="formZutu.media_creator" placeholder="请输入创作人" />
                    </a-form-item>
                    <a-form-item :wrapper-col="{ offset: 17, span: 24 }">
                        <a-button @click="dialogVisibleZutu = false">取消</a-button>
                        <a-button type="primary" style="margin-left: 10px" @click="uploadSureSubmit">确定</a-button>
                    </a-form-item>
                </a-form>
            </div>
        </div>
        </a-modal>
        <a-button v-if="useGlobal.location == 2" class="newBtn" @click="handleNewZutu">新建组图</a-button>
        <a-button class="newBtn" @click="handleNew">新建文件夹</a-button>
        <a-button 
        type="primary"
        class="uploadBtn"
        @mouseenter="handleEnter"
        @mouseleave="handleLeave">
            <template #icon>
                <!-- <DownloadOutlined /> -->
                <img src="@/assets/img/meadiaIndex/upload-icon.png" class="upload-icon"/>
                上传
            </template>
        </a-button>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from "vue";
import request from "@/utils/axios";
import { DownloadOutlined } from "@ant-design/icons-vue";
import { useGlobalStore } from '@/store/global';
import { useFileInfoStore } from '@/store/fileInfo';
import { useRouter, useRoute } from "vue-router";
import { message, Form } from "ant-design-vue";
// import MapContainer from '@/components/MapContainer/index.vue';
import { PositionOption } from '@/type/map';
const useGlobal = useGlobalStore();
const useFileInfo = useFileInfoStore();
const router = useRouter();
const route = useRoute();


const emit = defineEmits(['createFolder', 'createZutu']);

// 监测变化
watch(
    () => router.currentRoute.value.path,
    () => {
        const mediaUrl = ['/admin/finishProduct', '/admin/index', '/admin/myMedia', '/admin/recycle', '/admin/video'];
        const netdiskUrl = ['/netdisk/netdiskIndex', '/netdisk/netdiskCommon', '/netdisk/netdiskRecycle', '/netdisk/netdiskDetails'];
    if (netdiskUrl.includes(router.currentRoute.value.path)) {
        window.microApp.setGlobalData({
            ...window.microApp.getGlobalData(),
            location: 1,
            upload_model: false,
            wangpan: false,
            task_center: false,
            show_bar: true
        });
        useGlobal.setLocaton(1);
    } else if (mediaUrl.includes(router.currentRoute.value.path)) {
        window.microApp.setGlobalData({
            ...window.microApp.getGlobalData(),
            location: 2,
            upload_model: false,
            wangpan: false,
            task_center: false,
            show_bar: true
        });
        useGlobal.setLocaton(2);
    }
}, {
    immediate: true, deep: true
});

// 新建文件夹
const dialogVisible = ref<boolean>(false);
const directoryName = ref<string>('');
const dialogVisibleZutu = ref(false);
const formZutu = reactive({
    name: '',
    description: '',
    location: {
        address: '',
        longitudes: '',
        longitude: '',
        lng: '',
        lat: ''
    },
    shooting_time: 0,
    media_creator: ''
});
const newFolder = () => {
    if (useGlobal.location == 1) {
        request({
            url: "/mediaresourcelib-file-manager/resource/create/folder",
            method: "post",
            data: {
                parent_id: useFileInfo.directory_id,
                name: directoryName.value,
                location: useGlobal.location
            }
        }).then(res => {
            dialogVisible.value = false;
            if (res.data.status_code === 0) {
                message.error(res.data.msg);
                return;
            }
            message.success('文件夹创建成功');
            directoryName.value = '';
            emit('createFolder', 'folder-success');
        });
    } else {
        request({
            url: "/mediaresource-manage-service/medias/folders",
            method: "post",
            data: {
                id: useFileInfo.directory_id,
                name: directoryName.value
            }
        }).then(res => {
            dialogVisible.value = false;
            if (res.data.status_code === 0) {
                message.error(res.data.msg);
                return;
            }
            message.success('文件夹创建成功');
            emit('createFolder', 'folder-success',{parent_id:useFileInfo.directory_id,id:res.data.result.data,name: directoryName.value});
            directoryName.value = '';
        });
    }
};

const handleNew = () => {
    directoryName.value = '';
    dialogVisible.value = true;
}

const handleNewZutu = () => {
    resetFormZutu()
    dialogVisibleZutu.value = true;
}

const { validate, validateInfos } = Form.useForm(
    formZutu,
    reactive({
        name: [
        {
            required: true,
            message: '请输入名称',
        },
        ],
        description: [
        {
            required: true,
            message: '请输入图说',
        },
        ],
    })
);

// 组图确认上传
const uploadSureSubmit = async () => {
    validate().then(res => {
        console.log(res);
    }).catch(err => {
        console.log('error', err);
    });
    if (formZutu.location.address) {
        formZutu.location = {
            address: formZutu.location.address,
            longitude: formZutu.location.lat,
            longitudes: formZutu.location.lng,
            lat: formZutu.location.lat,
            lng: formZutu.location.lng
        };
    }
    request({
        url: "/mediaresource-manage-service/medias/atlas",
        method: "post",
        data: {
            ...formZutu,
            shooting_time: Date.parse(new Date(formZutu.shooting_time)),
            location: {
                address: formZutu.location.address,
                longitude: formZutu.location.lat,
                longitudes: formZutu.location.lng
            },
            parent_id: useFileInfo.directory_id
        }
    }).then(res => {
        dialogVisibleZutu.value = false;
        if (res.data.status_code === 0) {
            message.error(res.data.msg);
            return;
        }
        message.success('创建成功');
        resetFormZutu()
        // emit('createZutu', 'zutu-success');
        emit('createFolder', 'folder-success',{parent_id:useFileInfo.directory_id,id:res.data.result.data,name: directoryName.value});
    });
};
const resetFormZutu = ()=>{
    formZutu.name = '';
    formZutu.description = '';
    formZutu.location = {
        address: '',
        longitudes: '',
        longitude: '',
        lng: '',
        lat: ''
    };
    formZutu.shooting_time = 0;
    formZutu.media_creator = '';
}

// 获取选的高德地图的经纬度信息
const getLocationInfo = (info: PositionOption) => {
    formZutu.location = info
    console.log("父级拿到的数据:");
    console.log(formZutu.location);
}

const handleModelShow = () => {
    useGlobal.setUploadModel(true);
    window.microApp.setGlobalData({
        ...window.microApp.getGlobalData(),
        upload_model: true,
        wangpan: false,
        task_center: false
    });
}

const handleEnter = () => {
    if (useGlobal.location == 1) {
        window.microApp.setGlobalData({
            ...window.microApp.getGlobalData(),
            wangpan: true,
            meizi: false,
            task_center: false
        });
        useGlobal.setWangpan(true);
    } else {
        window.microApp.setGlobalData({
            ...window.microApp.getGlobalData(),
            wangpan: false,
            meizi: true,
            task_center: false
        });
        useGlobal.setWangpan(true);
    }
}

const handleLeave = () => {
    window.microApp.setGlobalData({
        ...window.microApp.getGlobalData(),
        wangpan: false,
        meizi: false,
        task_center: false
    });
    useGlobal.setWangpan(false);
}
</script>
<style lang="scss" scoped>
.wrapper-new{
    padding-top: 26px;
    margin-bottom: 32px;

    >label{
        display: block;
        margin-bottom: 10px;
        font-size: 16px;
    }

    .ant-modal-footer{margin-top: 32px;}
}

.newFileBox {
    position: absolute;
    right: 0;
    top: 10px;

    .upload-icon {
        position: relative;
        top: 2px;
    }
    .ant-btn {
        width: auto !important;
        height: 30px;
        padding: 0 10px;
        margin-left: 10px;
        &.newBtn {
            background: #f0f0f2 !important;
            border-color: transparent;
            margin-right: 10px;
        }
    }
}

.zutu-info{
    >h2{
        color: #3D3D3D;
        margin-top: 0;
        position: relative;
        font-size: 16px;

        &::before{
            content: '';
            width: 2px;
            height: 16px;
            background: #F9601D;
            border-radius: 1px;
            position: absolute;
            left: -6px;
            top: 4px;
        }
    }

    .mp-wrapper{
        padding-left: 8px;
        min-height: 32px;
        border: 1px solid rgba($color: #F9601D, $alpha: 0.2);
        border-radius: 4px;
        color: #F9601D;
    }
}
</style>
